<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view style="position: fixed; width: 100%; height: 100%; background-color: #f2f2f2;">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px;"
				color="#9F9F9F"
				:border="false"
				:shadow="false"
				background-color="#F2F2F2"
				@clickLeft="gaoback"
				@clickRight="showSetUp"
			>
				<!-- <view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view> -->
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<view slot="right"><uni-icons type="bars" color="#9F9F9F" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<view class="zhuti" :style="{ marginTop: topBar }">
			<!-- 标题 -->
			<view class="titleBox">
				<text>{{ i18n.ctwfont101 }}</text>
			</view>
			<view class="tishiTitle">
				<view class="">{{ i18n.ctwfont59 }}</view>
			</view>

			<uni-forms :modelValue="formList" ref="form" v-if="langShow" :rules="rules" validateTrigger="bind">
				<uni-forms-item :label="i18n.ctwfont60" :labelWidth="200" label-position="top" class="formItemBox">
					<input type="text" style="background-color: #FAFAFA;" :maxlength="25" disabled class="classInput" :placeholder="i18n.ctwfont61" v-model="formList.code" />
				</uni-forms-item>
				<uni-forms-item :label="i18n.ctwfont102" :labelWidth="150" label-position="top" required name="oldPassword" class="formItemBox">
					<input
						type="text"
						:maxlength="28"
						:password="true"
						class="classInput"
						:placeholder="i18n.ctwfont103"
						v-model="formList.oldPassword"
						@input="binddata('oldPassword', $event.detail.value)"
					/>
				</uni-forms-item>
				<view class="huiLine"></view>
				<uni-forms-item :label="i18n.ctwfont63" :labelWidth="150" label-position="top" required name="password" class="formItemBox">
					<input
						type="text"
						:maxlength="28"
						:password="YXeyeShow"
						class="classInput"
						:placeholder="i18n.ctwfont64"
						v-model="formList.password"
						@input="binddata('password', $event.detail.value)"
					/>
				</uni-forms-item>
				<uni-forms-item :label="i18n.ctwfont65" :labelWidth="150" label-position="top" required name="confirmPassword" class="formItemBox">
					<input
						type="text"
						:maxlength="28"
						:password="YXeyeShow"
						class="classInput"
						:placeholder="i18n.ctwfont66"
						v-model="formList.confirmPassword"
						@input="binddata('confirmPassword', $event.detail.value)"
					/>
					<uni-icons v-show="formList.confirmPassword" @tap="YXeyeopen" class="nameIcon2" color="#9e9fa0" :type="YXeye" size="14" />
				</uni-forms-item>
				<view class="submitBtn">
					<!-- loading -->
					<button size="mini" @tap="gaoback" class="submitBtnL" type="default">{{ i18n.ctwfont13 }}</button>
					<button size="mini" class="submitBtnR" @tap="FormSubmit" type="default">{{ i18n.ctwfont6 }}</button>
				</view>
			</uni-forms>
		</view>
		<!-- 密码修改成功 -->
		<uni-popup ref="loginPopupOk3" type="center" :animation="false" :maskClick="false">
			<view class="loginBox" @tap="goHomeBtn">
				<view class="imgBox"><image style="width: 100px; height: 100px;" mode="scaleToFill" src="/static/icon/superAnt/Warning-0801.png"></image></view>
				<view class="titleBox">{{ i18n.ctwfont67 }}</view>
				<view class="titleBox">{{ i18n.ctwfont68 }}</view>
			</view>
		</uni-popup>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import LanguageConfig from '@/i18n/LanguageConfig';
import { baseUrl } from '@/utils/http.js';
import { codeMapFun } from '@/utils/codeMap.js';
import { clearStorage, removeAllCookie, setStorage, removeCookie, getStorage } from '@/utils/setStorage.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			YXeye: 'eye-slash',
			YXeyeShow: true,
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			formList: {
				oldPassword: '', // 旧密码
				code: '', // 客户代号
				password: '', // 密码
				confirmPassword: '' // 确定密码
			},
			goSetTime: null, // 自动跳转
			langShow: true
		};
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	onShow() {
		this.formList.code = JSON.parse(getStorage('userconter')).customerCode;
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
			}
		});
	},
	mounted() {},
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 44; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('login');
		},
		rules() {
			return {
				// 旧密码
				oldPassword: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont135, trigger: 'blur' },
						{ minLength: 6, maxLength: 28, errorMessage: this.$t('login').ctwfont125, trigger: 'blur' }
						// { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,28}$/, errorMessage: '请输入正确的密码', trigger: 'blur' }
					]
				},
				password: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont122, trigger: 'blur' },
						{ minLength: 6, maxLength: 28, errorMessage: this.$t('login').ctwfont125, trigger: 'blur' },
						{
							validateFunction: this.passwordValidateFunction2
						}
						// { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,28}$/, errorMessage: '请输入正确的密码', trigger: 'blur' }
					]
				},
				// 确定密码
				confirmPassword: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont130, trigger: 'blur' },
						{ minLength: 6, maxLength: 28, errorMessage: this.$t('login').ctwfont125, trigger: 'blur' },
						// { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,28}$/, errorMessage: '请输入正确的密码', trigger: 'blur' },
						{
							validateFunction: this.passwordValidateFunction
						}
					]
				}
			};
		}
	},
	components: { setUpPages, signOut },
	methods: {
		// 回退
		gaoback() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: `/pages/home/index`
			});
			// #endif
			// #ifdef H5
			this.$Router.push(`/pages/home/index`);
			// #endif
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			if (data) {
				this.gaoback();
			}
		},
		FormSubmit() {
			this.$refs.form
				.submit()
				.then(async val => {
					const { oldPassword, password, confirmPassword } = this.formList;
					const params = {
						oldPassword,
						newPassword: password,
						confirmPassword: confirmPassword
					};
					const { data: res } = await this.$http(true, 'api/user/password/update', params, 'POST');
					if (res.errno === 0) {
						const lang = getStorage('language') || 'th';
						clearStorage();
						removeAllCookie();
						removeCookie(baseUrl);
						// 多语言重新赋值
						setStorage('language', lang);
						this.$refs.loginPopupOk3.open();
						this.goSetTime = setTimeout(() => {
							this.$refs.loginPopupOk3.close();
							// #ifdef APP-PLUS
							uni.redirectTo({
								url: '/pages/home/index'
							});
							// #endif
							// #ifdef H5
							this.$Router.push('/pages/home/index');
							// #endif
						}, 2000);
					} else {
						const err = codeMapFun().find(item => item[res.errno]);
						if (err) {
							uni.showToast({
								title: err[res.errno],
								icon: 'none',
								position: 'top'
							});
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								position: 'top'
							});
						}
						// uni.showToast({
						// 	title: res.data.customerCodeName,
						// 	icon: 'none',
						// 	position: 'top'
						// });
					}
				})
				.catch(err => {
					uni.showToast({
						title: 'Please fill in the correct information',
						icon: 'none',
						position: 'top'
					});
				});
		},
		// 眼睛
		YXeyeopen() {
			this.YXeyeShow = !this.YXeyeShow;
			if (this.YXeyeShow) {
				this.YXeye = 'eye-slash';
			} else {
				this.YXeye = 'eye';
			}
		},
		// 密码异步校验
		passwordValidateFunction(rule, value, data, callback) {
			if (value !== this.formList.password) {
				callback(this.$t('login').ctwfont121);
			} else {
				this.$refs.form.setValue('password', value);
			}
			return true;
		},
		// 密码异步校验
		passwordValidateFunction2(rule, value, data, callback) {
			if (this.formList.confirmPassword) {
				if (value !== this.formList.confirmPassword) {
					callback(this.$t('login').ctwfont121);
				} else {
					this.$refs.form.setValue('confirmPassword', value);
				}
			}
			return true;
		},
		// 关闭注册成功弹框
		goHomeBtn() {
			// 关闭自动跳转
			clearTimeout(this.goSetTime);
			this.$refs.loginPopupOk3.close();
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/home/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/home/index');
			// #endif
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 切换后校验优化
		erificationOptimization() {
			setTimeout(() => {
				this.formList.oldPassword ? this.$refs.form.setValue('oldPassword', this.formList.oldPassword) : '';
				this.formList.password ? this.$refs.form.setValue('password', this.formList.password) : '';
				this.formList.confirmPassword ? this.$refs.form.setValue('confirmPassword', this.formList.confirmPassword) : '';
			}, 200);
		},
		// 关闭设置
		closePopUp(val) {
			this.langShow = false;
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
			this.$nextTick(function() {
				this.langShow = true;
				this.erificationOptimization();
			});
		}
	}
};
</script>
<style lang="scss" scoped>
// 多行文本
::v-deep .uni-easyinput__content-textarea {
	min-height: 50px;
	height: 50px;
}
// formItem
::v-deep .uni-forms-item {
	margin-bottom: 19px;
}
::v-deep uni-button:after {
	border: none;
}
::v-deep .uni-forms-item__label {
	height: 30px;
}
::v-deep .uni-forms-item__content {
	min-height: 30px;
}
::v-deep .uni-error-message {
	width: 80%;
}
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #f2f2f2;
		width: 100%;
	}
}

.loginBox {
	width: 700rpx;
	height: 150px;
	.imgBox {
		display: flex;
		justify-content: center;
		padding: 20px 20px 15px 20px;
	}
	.titleBox {
		text-align: center;
		font-size: 16px;
		color: #fff;
	}
}
.zhuti {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	padding: 0 80rpx;
	box-sizing: border-box;

	.titleBox {
		text-align: center;
		font-size: 18px;
		color: #cf112a;
		margin-bottom: 80rpx;
	}
	.tishiTitle {
		text-align: center;
		font-size: $uni-font-size-custom-e;
		color: #cf112a;
		margin-bottom: 30rpx;
	}
	.phonebtn {
		font-size: $uni-font-size-custom-a;
		background-color: #d80c24;
		border: 1px solid #bb3242;
		padding: 0 10px;
		border-radius: 5px;
		color: #ffffff;
		line-height: 1.8;
		margin: 0;
		margin-left: 10px;
	}
	.phonebtn2 {
		font-size: $uni-font-size-custom-a;
		background-color: #ccc;
		border: 1px solid #ccc;
		padding: 0 10px;
		border-radius: 5px;
		color: #7d7d7d;
		line-height: 1.8;
		margin: 0;
		margin-left: 10px;
	}
	.formItemBox {
		background-color: #f2f2f2;
		.classInput {
			position: relative;
			height: 30px;
			color: #9e9fa0;
			border: 1px solid #e7e7e7;
			border-radius: 20px;
			padding: 0 10px;
			font-size: $uni-font-size-custom-b;
			background-color: #fff;
		}
		.nameIcon2 {
			position: absolute;
			right: 10px;
			top: 8px;
		}
	}
	.huiLine {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 140%;
		border-top: 2px solid #dadada;
		margin-bottom: 10px;
	}
	.submitBtn {
		margin-top: 80px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.submitBtnR {
			background-color: #cd001b;
			padding: 0 20px;
			border-radius: 20px;
			color: #ffffff;
			line-height: 2.4;
			margin: 0;
		}
		.submitBtnL {
			background-color: #cbcbcb;
			padding: 0 20px;
			border-radius: 20px;
			color: #ffffff;
			line-height: 2.4;
			margin: 0;
		}
	}
}
</style>
